<template>
  <div class="record-wrap">
    <div class="record-box">
      <span class="title">姓名:</span>
      <div class="content-box">
        <input type="text" placeholder="请输入姓名" class="content" v-model="name" maxlength="11" @blur="inputBlur"/>
      </div>
    </div>
    <div class="record-box">
      <span class="title">身份证号:</span>
      <div class="content-box">
        <input type="text" placeholder="请输入身份证号" class="content" v-model="cert" maxlength="18" @blur="inputBlur"/>
      </div>
    </div>

    <div class="record-box">
      <span class="title">入职日期:</span>
      <datetime format="YYYY-MM-DD" v-model="birthday" class="birthday" placeholder="请选择日期" :end-date="date"></datetime>
      <img src="./in.png" class="back" onclick="return false"/>
    </div>
    <div class="record-box">
      <div class="title">工号<span class="choose">(选填)</span>:</div>
      <div class="content-box">
        <input type="text" placeholder="请输入工号" class="content" v-model="workNum" maxlength="15" @blur="inputBlur"/>
      </div>
    </div>

    <div class="btn-box">
      <button type="button" class="btn" @click="confirm">确定</button>
    </div>

    <v-dialog v-model="modalVal" content="录入失败，在职员工的身份证号不能重复录入" type="default" @sure="sure"></v-dialog>

  </div>
</template>

<script>
  import {Datetime} from 'vux'
  import {baseUrl} from "../../../config/env"
  import {formatDate} from "../../../config/util"
  import dialog from "../../../components/dialog"

  export default {
    data() {
      return {
        name: "",
        cert: "",
        birthday: "",
        mechanismId: "",
        userSign: "",
        date: "",
        modalVal: false,
        workNum: ""
      }
    },
    mounted() {
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
    },
    methods: {
      checkName() {//校验姓名
        let reg = /^[\u2E80-\u9FFF]+$/; //中文
        if (this.name == "" || this.name == null) {
          this.$vux.toast.text("请输入姓名", "middle");
          return;
        } else if (!reg.test(this.name)) {
          this.$vux.toast.text("请输入中文姓名", "middle");
          return;
        } else if (this.name.length > 6) {
          this.$vux.toast.text("姓名不能超过6个字", "middle");
          return;
        }
        return true;
      },
      checkCert() {
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/; //身份证
        if (this.cert == "" || this.cert == null) {
          this.$vux.toast.text("请输入身份证号", "middle");
          return;
        } else if (!reg.test(this.cert)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      checkDate() {//校验入职日期
        if (this.birthday == "" || this.birthday == undefined || this.birthday == null) {
          this.$vux.toast.text("请选择入职日期", "middle");
          return;
        } else if (this.birthday == "请选择入职日期") {
          this.$vux.toast.text("请选择入职日期", "middle");
          return;
        }
        return true;
      },
      confirm() {//新增在职员工
        if (this.checkName() && this.checkCert() && this.checkDate()) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {
            "mechanismId": this.mechanismId,
            "userName": this.name,
            "userCardNumber": this.cert,
            "workTime": this.birthday,
            "workNum": this.workNum
          };

          let time = (new Date()).getTime();
          let url = baseUrl + "/work_money/add_mechanism_user?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          this.axios.post(baseUrl + "/work_money/add_mechanism_user?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("新增在职员工失败,请重试", "middle");
              } else if (resultObj.data == 2) {
                this.modalVal = true;
              }
              else {
                this.$router.push({path: "/enterpriselist", query: {"mechanismId": this.mechanismId, "type": 2}});
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
              return;
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      sure() {
        this.modalVal = false;
      }
    },
    components: {
      Datetime,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .record-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    overflow: hidden
    .record-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      background: #FFF
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      &:nth-child(2)
        margin-bottom: 0.267rem
      .title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .choose
        size-color(0.427rem, #999999)
      .content-box
        display: flex
        align-items: center
        flex: 1
        height: 1.28rem
        margin-right: 0.32rem
        .content
          width: 100%
          text-align: right
          height: 0.6rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
      .birthday
        display: flex
        align-items: center
        flex: 1
        text-align: right
        padding-right: 0.267rem
        margin-left: 0.2rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .birthday >>> .weui-cell__ft .vux-cell-placeholder
        color: rgba(204, 204, 204, 1)
      .back
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)

    .btn-box
      position: absolute
      bottom: 0.64rem
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.28rem
      .btn
        width: 90.4%
        height: 1.28rem
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        font-size: 0.453rem
        color: rgba(255, 255, 255, 1)
        font-weight: 500
        border-radius: 0.16rem
</style>
